<template>
	<view>
		<view class="page-content">
			<view @tap="orderbyChange" :class="{'text-theme': hasChoose}" class="bg-grey padding margin text-center">
				<span>筛选按钮</span>
			</view>
			<fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList" @result="resultConditon" />
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''" v-for="(item,i) in taskExecList" :key="i">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content flex-sub">
							<view>任务名称：{{item.title}}</view>
							<view class="text-gray text-sm flex justify-between">
								完成时间： {{item.createTime}}
							</view>
							<view class="text-gray text-sm flex justify-between">
								学生姓名： {{item.stuName}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					解答：{{item.content}}
				</view>
				<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
					<image style="width: 300px; height: 300px; background-color: #eeeeee;" :src="item.picUrl"
						@error="imageError"></image>
				</view>
				<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
					<video id="myVideo" :src="item.videoUrl" @error="videoErrorCallback" controls></video>
				</view>
				<view class="text-gray text-sm text-right padding">
					<button class="cu-btn round text-blue" @click="look(item.id)">点击评论</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	export default {
		components: {
			fjjCondition
		},
		data() {
			return {
				taskExecList: [],
				stuId: "",
				color: '#4D7BFE',
				hasChoose: false,
				menuList: [{
					'title': '日期范围',
					'type': 'range',
					'key': 'timeRange',
				}, {
					'title': '成绩范围',
					'type': 'rangenumber',
					'key': 'count',
					'minName': 'minCount',
					'maxName': 'maxCount',
				}, {
					'title': '请输入学生姓名',
					'type': 'singleinput',
					'key': 'input',
				}],
				searchForm: {
					minNum: "",
					maxNum: "",
					name: "",
					startDate: "",
					endDate: ""
				}
			}
		},
		onLoad(option) {
			this.stuId = option.id
			this.getData(this.stuId)
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			getData(stuId) {
				uni.request({
					url: 'http://localhost:8082/task_admin/task-exec/list?teaId=' + uni.getStorageSync('teaId'),
					data: this.searchForm,
					dataType:'json',
					method:"POST",
					success: (res) => {
						if (res.data.code == 200) {
							this.taskExecList = res.data.data
						}
					}
				})
			},
			imageError(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			look(id) {
				uni.navigateTo({
					url: '/pages/teacher/add-evaluate?execId=' + id + "&stuId=" + this.stuId 
				});
			},
			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				this.searchForm.minNum = obj.result.count[0]
				this.searchForm.maxNum = obj.result.count[1]
				this.searchForm.name = obj.result.input
				this.searchForm.startDate = obj.result.timeRange[0]
				this.searchForm.endDate = obj.result.timeRange[1]
				console.log("看看修改后的对象 { }", this.searchForm);
				this.getData();
			},
			orderbyChange(obj) {
				this.$refs.condition.visibleDrawer = true;
			}
		}
	}
</script>


<style>

</style>
